<!-- 收藏 -->
<template>
  <div class="index-container">
    <div class="header-box">
      <TabsList :tabsList="tabsList" :activeItem="active" />
      <Avater></Avater>
    </div>
    <div class="photo-store">
      <van-list
        v-model:loading="loading"
        finished-text="没有更多了"
        :finished="finished"
        :immediate-check="true"
        @load="onLoad"
      >
        <div class="photo-list">
          <div class="photo-list-left">
            <template v-for="item in goodsListLeft" :key="item.id">
              <PhotoItem :itemData="item" isHeadle @clickCollect="headleCollect"/>
            </template>
          </div>
          <div class="photo-list-right">
            <template v-for="item in goodsListRight" :key="item.id">
              <PhotoItem :itemData="item" isHeadle @clickCollect="headleCollect"/>
            </template>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import icon_hand3 from "@/assets/image/icon_hand3.png";
import ClassifyList from "@/components/classifyList/index.vue";
import PhotoItem from "@/components/photoStore/photoItem.vue";

const route = useRoute();

const props = defineProps({
  isRealtime: {
    type: Boolean,
    default: false,
  },
});

const state = reactive({
  icon_hand3,
  goodsList: [],
  tabsList: [
    {
      id: 1,
      name: "收藏",
    },
  ],
  page: 1,
  size: 8,
  total: 0,
});

const { goodsList, tabsList } = toRefs(state);

const goodsListLeft = computed(() =>
  state.goodsList.filter((o, i) => i % 2 == 0)
);
const goodsListRight = computed(() =>
  state.goodsList.filter((o, i) => i % 2 == 1)
);

const router = useRouter();

import {
  GetCollect, // 获取相册分页
} from "@/api/index";

let active = ref(1);

let loading = ref(false);
let finished = ref(false);

const GetCollectData = async () => {
  let { page, size } = state;
  let params = {
    page,
    size,
  };
  loading.value = true;
  let { data } = await GetCollect(params);
  state.total = data.pagination.total;
  state.goodsList = state.goodsList.concat(data.list);
  loading.value = false;
  if (state.goodsList.length == data.pagination.total) {
    finished.value = true;
  }
};

const onLoad = () => {
  console.log(state.total, state.goodsList.length, "state.total");
  if (state.goodsList.length < state.total && state.total != 0) {
    state.page++;
    GetCollectData();
  }
};

// 收藏
const headleCollect = (item) => {
  let index = state.goodsList.findIndex( o => o.id == item.id)
  state.goodsList[index].isCollect = !state.goodsList[index].isCollect 
  console.log(item)
}

onMounted(() => {
  GetCollectData();
});

</script>



<style lang="scss" scoped>
.photo-store-head {
  padding: 10px 10px 0 10px;
}

.photo-list {
  display: flex;

  .photo-list-left,
  .photo-list-right {
    width: calc(50% - 5px);
  }
}

.photo-item {
  margin: 10px 0 0 10px;
  background: #fff;
  border-radius: 18px;

  .van-image {
    width: 100%;
    height: 180px;
  }
}

.photo-item-img {
  position: relative;
  .van-image {
    width: 100%;
    height: 180px;
    border-radius: 18px;
    overflow: hidden;
    display: block;
  }
  .view-box {
    position: absolute;
    top: 10px;
    left: 50%;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 3px 15px;
    border-radius: 20px;
    transform: translateX(-50%);
    color: #fff;
    span {
      display: block;
      line-height: 20px;
    }
    img {
      width: 18px;
      margin-right: 5px;
    }
  }
}

.photo-item-content {
  padding: 5px;
}

.photo-item-content-left {
  display: flex;
  align-items: center;
  span {
    color: #999;
    font-size: 14px;
  }
  .van-image {
    width: 36px;
    height: 36px;
    border-radius: 36px;
    overflow: hidden;
    flex: none;
    margin-right: 5px;
  }
}

.activity-item-main {
  .van-image {
    width: 100%;
    height: 100%;
  }
}
</style>
